<template>
  <div class="question-details">
    <div class="crumbs">
      <nuxt-link to="/">
        首页
      </nuxt-link>
      <em />
      <nuxt-link to="/question">
        问答
      </nuxt-link>
      <em />
      <span>
        问答详情
      </span>
    </div>
    <img src="~assets/img/question/banner.png" alt="" class="card">
    <div class="content">
      <div v-if="hospitallist.length" class="aside">
        <div class="aside-title">
          容猫本地机构排名
        </div>
        <div class="aside-hospital-list">
          <div v-for="(hospital, index) in hospitallist" :key="hospital.hospital_id" class="hospital-list-item">
            <img class="mark-no" :src="nolist[index]" alt="">
            <div class="hospital-info">
              <nuxt-link :to="`/hospital/${hospital.hospital_id}`">
                <img :src="hospital.hospital_photo" alt="" class="hospital-img">
              </nuxt-link>
              <div class="hospital-des">
                <nuxt-link :to="`/hospital/${hospital.hospital_id}`">
                  <div class="name" :title="hospital.hospital_name">
                    {{ hospital.hospital_name }}
                  </div>
                </nuxt-link>
                <div class="amount">
                  <span>医生{{ hospital.doctor || 1 }}｜已服务{{ hospital.conversation_total }}人次</span>
                  <div v-if="zixunim" class="btn-consult" @click="handleChart(hospitallist[index])">
                    快速咨询
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="info">
          <img v-if="answerData.user && answerData.user.user_photo" :src="answerData.user.user_photo" alt="">
          <div v-if="answerData.content" class="con">
            <div class="tit">
              {{ answerData.content.question_title ? answerData.content.question_title : '-' }}
            </div>
            <div class="det">
              <span v-if="answerData.user && answerData.user.hospital_name">{{ answerData.user.hospital_name }}</span>
              <span>{{ answerData.created_at ? answerData.created_at.split(' ')[0] : '' }} 发表</span>
              <span>{{ answerData.browse_count || 0 }}人阅读</span>
              <span>已有{{ answerData.weight || 0 }}人咨询</span>
              <!-- <div class="answer-btn" @click="consultation('u', answerData.user)">
                我要咨询
              </div> -->
            </div>
          </div>
        </div>
        <div class="ask">
          <div class="ask-qs">
            <span>问题详情：</span>
            <div v-if="answerData.topic && answerData.topic.length > 0" class="topic">
              <nuxt-link v-for="item in answerData.topic" :key="item.id" :to="`/question?class_name=${item.topic_name}&class_id=${item.topic_id}`">
                {{ item.topic_name }}
              </nuxt-link>
            </div>
          </div>
          <div v-if="answerData.content.question_content_brief" class="ask-right">
            <p>{{ answerData.content.question_content_brief }}</p>
          </div>
        </div>
        <div v-if="answerData.answer_count && answerData.answer_count > 0 && answerData.answer" class="answer">
          <div class="answer-count">
            <em />
            {{ answerData.answer_count }}条回复
          </div>
          <div v-if="answerData.answer.user" class="answer-info">
            <nuxt-link :to="`/doctor/${answerData.answer.user.hospital_id}`" class="photo">
              <img v-if="answerData.answer.user && answerData.answer.user.user_photo" :src="answerData.answer.user.user_photo" alt="">
            </nuxt-link>
            <nuxt-link :to="`/doctor/${answerData.answer.user.hospital_id}`" class="d-info">
              <div class="d-name">
                {{ answerData.answer.user && answerData.answer.user.hospital_name }}
                <img src="~assets/img/doctor.png" alt="">
              </div>
              <div v-if="answerData.answer.created_at" class="d-time">
                {{ answerData.answer.created_at.split(' ')[0] }}
              </div>
            </nuxt-link>
            <div v-if="zixunim" class="answer-btn" @click="consultation('d', answerData.answer.user)">
              我要咨询
            </div>
          </div>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <div class="answer-con" v-html="answerData.answer.answer_content" />
        </div>
        <div v-customLoading="loading" class="answer-list-content">
          <div class="relative-qs">
            <span>相关问题：</span>
            <div v-if="answerData.topic && answerData.topic.length > 0" class="topic">
              <nuxt-link v-for="item in answerData.topic" :key="item.id" :to="`/question?class_name=${item.topic_name}&class_id=${item.topic_id}`">
                {{ item.topic_name }}
              </nuxt-link>
            </div>
          </div>
          <div v-if="question.length" class="answer-list-box">
            <AnswerList v-for="item in question" :key="item.content_id" :question-data="item" @classId="getData" />
            <Pager class="pager" :is-short="true" :page-config="pageConfig" :home-tab-name="classId" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="question.length===0" class="answer-noData">
            <div class="answer-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="answer-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="topicList && topicList.length > 0" class="topic-list">
          <ul class="relevant-list">
            <li v-for="item in topicList" :key="item.wiki_id" :class="{sp:item.wiki_id === topicCon.wiki_id}" @click="changeTopic(item)">
              {{ item.wiki_name }}
            </li>
          </ul>
          <div v-if="topicCon" class="relevant-con">
            <div v-if="topicCon.describe" class="tit">
              项目简介
            </div>
            <p v-if="topicCon.describe">
              {{ topicCon.describe }}
            </p>
            <div v-if="topicCon.crowd" class="tit">
              适用人群
            </div>
            <p v-if="topicCon.crowd">
              {{ topicCon.crowd }}
            </p>
            <div v-if="topicCon.merit || topicCon.defect" class="tit">
              优缺点
            </div>
            <p v-if="topicCon.merit">
              <span>优点</span>：
              {{ topicCon.merit }}
            </p>
            <p v-if="topicCon.defect">
              <span>缺点</span>：
              {{ topicCon.defect }}
            </p>
          </div>
        </div>

        <div v-if="recommList && recommList.length > 0" class="recomm">
          <div class="tit">
            相关问题
          </div>
          <nuxt-link v-for="item in recommList" :key="item.content_id" :to="`/question/${item.content_id}`" class="item">
            <div class="r-tit">
              {{ item.content.question_title }}
            </div>
            <div class="r-con">
              <span>{{ item.answer_count || 0 }} </span>名专家回复
              <em>· </em>
              <span>{{ item.focus_count || 0 }} </span>人关注
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAnswerDetailsData, getContentRecomm, getProject, getHospitalListAd, getAnonymousToken, exposureReq } from '@/api/answerDetails'
import { isBrowser } from '@/utils/util'
import AnswerList from '@/components/answerList'
import Pager from '@/components/pagerTwo'
import { getQuestionList } from '@/api/answer'
import Cookies from 'js-cookie'
import Bus from '@/utils/Bus'
var unique_id = ''
var _channel = ''
export default {
  components: {
    AnswerList,
    Pager
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    if (store.state.unique_id) {
      unique_id = store.state.unique_id
    } else {
      if (isBrowser()) {
        unique_id = Cookies.get('unique_id')
      } else {
        unique_id = req.cookies.unique_id
      }
    }
    if (query._channel) {
      _channel = query._channel
    } else {
      _channel = 'rcat_pc'
    }
    // console.log(unique_id, 'async')
    const {
      data: {
        token
      }
    } = await getAnonymousToken(unique_id, _channel)
    const { data: answerData } = await getAnswerDetailsData(params.details)
    const project_id = answerData.project ? answerData.project.wiki_id : undefined
    const { data: hospitallist } = await getHospitalListAd({ project_id, sort_key: 'intelligent', sort_val: 'desc', per_page: 5 }, `Bearer ${token}`)
    const questionData = await getQuestionList(query.page ? query.page : 1, 3, query.class_id)
    return {
      answerData,
      hospitallist,
      questionData
    }
  },
  data() {
    return {
      zixunim: false,
      recommList: [],
      topicList: [],
      topicCon: {},
      id: this.$route.params.details ? this.$route.params.details : null,
      nolist: [
        require('../../assets/img/question/no1.png'),
        require('../../assets/img/question/no2.png'),
        require('../../assets/img/question/no3.png'),
        require('../../assets/img/question/no4.png'),
        require('../../assets/img/question/no5.png')
      ],
      question: [],
      loading: false,
      classId: '',
      pageConfig: {
        pageNo: this.$route.query.page ? Number(this.$route.query.page) : 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      }
    }
  },
  created() {
    this.pageConfig.total = this.questionData.meta.total
    this.pageConfig.pageTotal = this.questionData.meta.last_page
    this.question = this.questionData.data
    getContentRecomm({
      content_id: this.answerData.content_id,
      per_page: 3,
      page: 1,
      type: 'question'
    }).then(res => {
      this.recommList = res.data || []
    })
    if (this.answerData.topic && this.answerData.topic.length > 0) {
      getProject({
        topic_id: this.answerData.topic[0].topic_id
      }).then(res => {
        this.topicList = res.data || []
        this.topicCon = this.topicList[0] || {}
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      Bus.$emit('triggerTrack', {
        action: 'browse',
        track_id: `question-details#${this.id}`
      })

      this.hospitallist.forEach(h => {
        const exposureParams = {
          media: _channel,
          time: (new Date()).getTime(),
          unique_id: localStorage.getItem('unique_id')
        }
        const url = `${h.show_url}&time=${exposureParams.time}&unique_id=${exposureParams.unique_id}&media=${exposureParams.media}`
        exposureReq(url)
      })
    })
    setTimeout(() => {
      this.zixunim = true
    }, 1000)
  },
  methods: {
    changeTopic(item) {
      this.topicCon = item || {}
    },
    consultation(type, val) {
      var customer = {
        user_id: this.hospitallist[0].hospital_id,
        user_name: this.hospitallist[0].hospital_name,
        user_photo: this.hospitallist[0].hospital_photo,
        hook_user_id: this.hospitallist[0].hospital_id,
        hook: {
          user_id: this.hospitallist[0].hospital_id
        }
      }
      this.$store.dispatch('IM/getHookUserInfo', customer.hook.user_id)
      this.$store.commit('IM/SET_HOOK', customer.hook.user_id)
      this.$store.dispatch('IM/ocWindow', true).then(() => {
        this.$store.dispatch('IM/createSession', customer)
        // this.$store.dispatch('IM/getNewClientHistoricalRecord', customer)
      })

      const exposureParams = {
        media: _channel,
        time: (new Date()).getTime(),
        unique_id: localStorage.getItem('unique_id')
      }
      const url = `${this.hospitallist[0].show_url}&time=${exposureParams.time}&unique_id=${exposureParams.unique_id}&media=${exposureParams.media}`
      exposureReq(url)
      // Bus.$emit('open')
      if (type === 'd') {
        Bus.$emit('triggerTrack', {
          action: 'click',
          track_id: `question-details#${this.id}-chat-doctor#${val.hospital_id}`
        })
      }
      if (type === 'u') {
        Bus.$emit('triggerTrack', {
          action: 'click',
          track_id: `question-details#${this.id}-chat-user#${val.hospital_id}`
        })
      }
    },
    // 我要咨询
    handleChart(hospital) {
      var customer = {
        user_id: hospital.hospital_id,
        user_name: hospital.hospital_name,
        user_photo: hospital.hospital_photo,
        hook_user_id: hospital.hospital_id,
        hook: {
          user_id: hospital.hospital_id
        }
      }

      const exposureParams = {
        media: _channel,
        time: (new Date()).getTime(),
        unique_id: localStorage.getItem('unique_id')
      }
      const url = `${hospital.click_url}&time=${exposureParams.time}&unique_id=${exposureParams.unique_id}&media=${exposureParams.media}`
      exposureReq(url)
      // var customer = {
      //   hospital_id: 284625,
      //   hospital_name: '喵四',
      //   user_photo: 'https://img.rongcat.net/images/2020/04/10/yVlC9hgRdT9uSLhL3JhDS2K1UQTDu8Roi6YcE5MX.png',
      //   hook_hospital_id: 284625,
      //   hook: {
      //   }
      // }
      this.$store.dispatch('IM/getHookUserInfo', customer.hook.user_id)
      this.$store.commit('IM/SET_HOOK', customer.hook.user_id)
      this.$store.dispatch('IM/ocWindow', true).then(() => {
        this.$store.dispatch('IM/createSession', customer)
        // this.$store.dispatch('IM/getNewClientHistoricalRecord', customer)
      })
      Bus.$emit('triggerTrack', {
        action: 'click',
        track_id: `question-details-chat-doctor#${hospital.user_id}`
      })
    },
    getData({ id, name }, page) {
      this.loading = true
      let p = null
      if (page) {
        p = page
      } else {
        p = 1
      }
      this.pageConfig.pageNo = p
      const query = {
        class_name: this.$route.query.class_name ? this.$route.query.class_name : undefined,
        class_id: this.$route.query.class_id ? this.$route.query.class_id : undefined,
        page: p
      }
      if (id) {
        query.class_id = id
        query.class_name = name
      }
      this.$router.push({ query: query })
      getQuestionList(p, 3, query.class_id).then(res => {
        this.question = res.data
        // this.doctorOneData()
        this.pageConfig.total = res.meta.total
        this.pageConfig.pageTotal = res.meta.last_page
        this.loading = false
      })
    },
    changeCurrentPage(page) {
      this.pageConfig.pageNo = page
      this.getData(this.classId, page)
    }
  },
  head() {
    // console.log(this.answerData, '21')
    const answerContent = this.answerData.content.question_content.slice(0, 80)
    return {
      title: this.answerData.content.question_title + '_容猫医美',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `${answerContent}`
        }, {
          name: 'keywords', content: ` ${this.answerData && this.answerData.project && this.answerData.project.parent_list && this.answerData.project.parent_list.length > 0 ? this.answerData.project.parent_list[0].class_name : ''},${this.answerData && this.answerData.project && this.answerData.project.parent_list && this.answerData.project.parent_list.length > 1 ? this.answerData.project.parent_list[1].class_name : ''},${this.answerData && this.answerData.project && this.answerData.project.parent_list && this.answerData.project.parent_list.length > 2 ? this.answerData.project.parent_list[2].class_name : ''} `
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/product/${this.$route.params.details}`
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  -webkit-tap-highlight-color: transparent;
  ::-webkit-scrollbar {
    display: none;
  }
}
.question-details {
  background: #f6f6f6;
  padding-bottom: 30px;
  .crumbs {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 54px;
    line-height: 54px;
    padding: 0 30px;
    span {
      color: #504cff;
    }
    em {
      height: 6px;
      width: 6px;
      border-top: 1px #cccccc solid;
      border-right: 1px #cccccc solid;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg); /* IE 9 */
      -moz-transform: rotate(45deg); /* Firefox */
      -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
      -o-transform: rotate(45deg);
      margin: 0 10px 0 6px;
    }
  }
  .card {
    display: block;
    width: 1190px;
    height: auto;
    margin: 0 auto 10px;
  }
  .content {
    display: flex;
    justify-content: space-between;
    width: 1190px;
    margin: 0 auto;
    .aside {
      flex-shrink: 0;
      width: 300px;
      height: 606px;
      overflow-y: auto;
      margin-right: 10px;
      background: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      position: relative;
      .aside-title {
        height: 60px;
        border-bottom: 1px solid #f6f6f6;
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 61px;
        padding: 0 14px;
        box-sizing: border-box;
        background-color: #fff;
        position: sticky;
        top: 0;
      }
      .aside-hospital-list {
        box-sizing: border-box;
        padding: 4px 6px;
        .hospital-list-item {
          width: 288px;
          height: 90px;
          background: rgba(240, 239, 255, 0.5);
          border-radius: 8px;
          margin: 10px 0;
          padding: 0 7px;
          overflow: hidden;
          position: relative;
          .mark-no {
            position: absolute;
            top: 0;
            left: 14px;
            width: 21px;
            height: 22px;
          }
          .hospital-info {
            display: flex;
            align-items: center;
            margin-top: 26px;
            .hospital-img {
              width: 54px;
              height: 54px;
              margin-right: 10px;
              border-radius: 50%;
              overflow: hidden;
              flex-shrink: 0;
            }
            .hospital-des {
              flex: 1;
              overflow: hidden;
              .name {
                margin-bottom: 6px;
                font-size: 16px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                color: #212121;
                line-height: 22px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .amount {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                  font-size: 12px;
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #666666;
                }
                .btn-consult {
                  width: 64px;
                  height: 20px;
                  background: #ff59a0;
                  border-radius: 0px 8px 0px 8px;
                  font-size: 13px;
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  text-align: center;
                  color: #ffffff;
                  line-height: 20px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
    .left {
      flex: 1;
      border-radius: 4px;
      & > div {
        background: #ffffff;
      }
      .info {
        display: flex;
        align-items: center;
        padding: 30px 22px 15px;
        border-bottom: 1px #f6f6f6 solid;
        img {
          flex-shrink: 0;
          height: 60px;
          width: 60px;
          border-radius: 100%;
          margin-right: 10px;
          object-fit: cover;
        }
        .con {
          flex: 1;
          overflow: hidden;
          height: auto;
          .tit {
            font-size: 18px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
            line-height: 25px;
            margin-bottom: 4px;
          }
          .det {
            display: flex;
            color: #999;
            flex-wrap: wrap;
            font-size: 12px;
            span {
              flex-shrink: 0;
              padding-right: 20px;
            }
          }
        }
      }
      .ask {
        padding: 15px 22px;
        .ask-right {
          min-height: 70px;
          background: rgba(235, 235, 235, 0.24);
          border-radius: 4px;
          padding: 15px;
          font-size: 18px;
          color: #333333;
          line-height: 25px;
          margin-top: 14px;
          border-radius: 4px;
        }
      }
      .ask-qs,
      .relative-qs {
        display: flex;
        span {
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #333333;
          line-height: 25px;
        }
        .topic {
          display: flex;
          a {
            display: inline-block;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            color: #ffffff;
            line-height: 20px;
            background: #9781ff;
            border-radius: 4px;
            padding: 4px 9px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
      .relative-qs {
        padding: 22px 0;
        margin: 0 22px;
        border-bottom: 1px solid #f6f6f6;
      }
      .answer {
        padding: 0 22px 38px;
        .answer-count {
          display: flex;
          align-items: center;
          height: 22px;
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          line-height: 22px;
          margin-bottom: 24px;
          em {
            width: 2px;
            height: 11px;
            background: #a485ff;
            margin-right: 10px;
          }
        }
        .answer-info {
          display: flex;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px #f6f6f6 solid;
          .photo {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            cursor: pointer;
            overflow: hidden;
            img {
              display: block;
              width: 50px;
              height: 50px;
            }
          }
          .d-info {
            flex: 1;
            padding: 0 10px;
            .d-name {
              display: flex;
              align-items: center;
              height: 25px;
              font-size: 18px;
              color: #a485ff;
              line-height: 25px;
              img {
                width: 40px;
                height: auto;
                margin-left: 5px;
              }
            }
            .d-time {
              height: 20px;
              font-size: 14px;
              color: #999999;
              line-height: 20px;
            }
          }
        }
        .answer-con {
          line-height: 20px;
          border-bottom: 1px #f6f6f6 solid;
          padding: 24px 0 37px;
          color: #333;
        }
      }
      .answer-list-content {
        margin-top: 10px;
        border-radius: 4px;
        .answer-item {
          padding: 20px 22px;
        }
        .pager {
          padding-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .right {
      flex-shrink: 0;
      width: 340px;
      margin-left: 10px;
      .recomm {
        background: #ffffff;
        border-radius: 4px;
        padding: 20px 16px;
        .tit {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          line-height: 20px;
        }
        .item {
          display: block;
          padding: 17px 0;
          border-bottom: 1px #f6f6f6 solid;
          .r-tit {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
            margin-bottom: 10px;
          }
          .r-con {
            display: flex;
            align-items: center;
            line-height: 20px;
            color: #999;
            em {
              padding: 0 10px;
            }
            span {
              color: #ff59a0;
            }
          }
        }
      }
      .topic-list {
        background: #ffffff;
        border-radius: 4px;
        padding: 20px 16px 5px;
        margin-bottom: 10px;
        .relevant-list {
          display: flex;
          padding: 0;
          margin: 0;
          overflow-x: scroll;
          margin-bottom: 25px;
          -webkit-tap-highlight-color: transparent;
          list-style: none;
          ::-webkit-scrollbar {
            display: none;
          }
          li {
            flex-shrink: 0;
            margin-right: 20px;
            height: 32px;
            line-height: 28px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            cursor: pointer;
            &.sp {
              position: relative;
              font-size: 20px;
              color: #8d66ff;
              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                margin-left: -8px;
                left: 50%;
                background: #8d66ff;
                border-radius: 3px;
                width: 15px;
                height: 4px;
              }
            }
          }
        }
        .relevant-con {
          .tit {
            height: 20px;
            line-height: 20px;
            color: #666666;
            font-weight: 500;
            margin-bottom: 15px;
          }
          p {
            line-height: 20px;
            margin-bottom: 15px;
            color: #999;
            span {
              color: #666666;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .answer-btn {
    flex-shrink: 0;
    width: 82px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #ff59a0;
    border-radius: 18px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
